<template>
  <div class="app-container">
    <el-form label-width="120px">
      <el-form-item label="信息描述">
        文件不能超过10MB
      </el-form-item>

      <el-radio-group v-model="labelPosition" size="small">
        <el-radio-button label="left">左对齐</el-radio-button>
        <el-radio-button label="right">右对齐</el-radio-button>
        <el-radio-button label="top">顶部对齐</el-radio-button>
      </el-radio-group>
      <div style="margin: 20px;"></div>
      <el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign">
        <el-form-item label="课程资源名称">
          <el-input v-model="formLabelAlign.title"></el-input>
        </el-form-item>
      </el-form>

      <el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign">
        <el-form-item label="课程Id">
          <el-input v-model="formLabelAlign.courseId"></el-input>
        </el-form-item>
      </el-form>


      <el-form-item label="选择文件">
        <el-upload
          class="avatar-uploader"
          :action="BASE_API+'/eduoss/fileoss'"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="URL" src="https://online-education-wsz.oss-cn-hangzhou.aliyuncs.com/2022/10/fw.png" class="avtar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="saveResource()">立即创建</el-button>
          <el-button @click="Reset()">重置</el-button>
        </el-form-item>

    </el-form>
  </div>
</template>

<script>
import resource from '@/api/edu/resource'
export default {
    data() {
            return{
                BASE_API: process.env.BASE_API, // 接口API地址
                importBtnDisabled: false, // 按钮是否禁用,
                loading: false,
                
                labelPosition: 'right',
                formLabelAlign: {
                  title: '',
                  courseId:'',
                  size:'',
                  url:''
                },
                URL:''
            }
    },
    created(){         
    },
    methods:{
        handleAvatarSuccess(res, file) {
          this.size = file.size
          this.URL=res.data.url
          this.formLabelAlign.url=res.data.url
      },
      beforeAvatarUpload(file) {

        const isLt10M = file.size / 1024 / 1024 < 10;

        if (!isLt10M) {
          this.$message.error('上传资料大小不能超过 10MB!');
        }
        return isLt10M;
      },
      saveResource(){
        resource.saveResource(this.formLabelAlign)
        .then(response=>{
          this.$message.success('提交成功')
          window.location.href="/"
        })
      },
      Reset(){
        this.formLabelAlign={}
      }
    }
}
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>